import '@animxyz/core';
import { XyzTransitionGroup } from '@animxyz/react';

import Line1 from '@/assets/car-line-1.png';
import { useSwiper, useSwiperSlide } from 'swiper/react';

import Swiper1Text1 from '@/assets/swiper1-text-1.png';
import Swiper1Text2 from '@/assets/swiper1-text-2.png';

import DefaultLine from '@/assets/default-line-1.png';
import useRoundDrag from '@/hooks/useRoundDrag';
import classNames from 'classnames';
import { useState } from 'react';

const TotalFrames = 18; // ?总计多少帧
const CarFramesImages = [] as string[];
for (let i = 1; i <= TotalFrames; i++) {
  CarFramesImages.push(`/car/s1-car-${i}.png?v=1.0.0`);
}

export default function Car1() {
  const { isActive } = useSwiperSlide();
  const swiper = useSwiper();
  const [progress, setProgress] = useState<number>(1);
  const { renderNode: renderDragNode } = useRoundDrag({
    total: TotalFrames,
    progress: progress,
    onSetProgress: function (value: number) {
      setProgress(value);
    },
    onChangeAfter: function (value: number) {
      if (value >= TotalFrames) {
        setTimeout(() => {
          swiper.slideNext();
        }, 500);
      }
    },
    label: (
      <>
        轻触划屏
        <br />
        领略不熄燃情
      </>
    ),
  });

  return (
    <>
      <b
        className=" w-full h-full absolute left-0 top-0"
        style={{
          backgroundImage: `url(${DefaultLine})`,
          backgroundSize: '100% 100%',
        }}
      ></b>
      <b
        className="w-full h-full absolute left-0 top-0"
        style={{
          backgroundImage: `url(${Line1})`,
          backgroundSize: '100% 100%',
        }}
      ></b>

      <XyzTransitionGroup
        duration="auto"
        appear
        appearVisible
        xyz="fade down-100% stagger-2 delay-3"
        className="flex flex-col items-end absolute top-[210px] right-[90px]"
      >
        {isActive && (
          <p
            className="w-[304px] h-[34px] bg-cover bg-no-repeat -mr-4"
            style={{
              backgroundImage: `url(${Swiper1Text1})`,
            }}
          ></p>
        )}
        {isActive && (
          <p
            className="w-[470px] h-[124px] bg-cover bg-no-repeat mt-4"
            style={{
              backgroundImage: `url(${Swiper1Text2})`,
            }}
          ></p>
        )}
      </XyzTransitionGroup>

      {CarFramesImages.map((path: string, index: number) => (
        <img
          key={path}
          src={path}
          className={classNames(
            'absolute left-0 top-0 w-full h-full object-contain transition-all',
            {
              block: index + 1 === progress,
              hidden: index + 1 !== progress,
            },
          )}
        />
      ))}

      <div className=" absolute left-0 right-0 bottom-16 flex justify-center z-10">
        {renderDragNode()}
      </div>
    </>
  );
}
